import React ,{useCallback , useMemo }from 'react';
import {bindActionCreators } from  'redux' ;
import {connect } from  'react-redux';
import './App.css';

import Header from '../common/Header.jsx';
import DepartDate from './DepartDate.jsx';
import HightSpeed  from './HighSpeed.jsx';
import Journey  from  './Journey.jsx';
import Submit from './Submit.jsx';

import CitySelector  from '../common/CitySelector.jsx' ;
import DateSelector  from '../common/DateSelector.jsx' ;
 

import {h0} from '../common/fp' ;
 
import {
    exchangeFromTo,
    showCitySelector,
    hideCitySelector,
    fetchCityData,
    setSelectedCity,
    showDateSelector,
    hideDateSelector,
    setDepartDate,
    toggleHighSpeed,
} from  './actions'

function App(props){
    const {
        from,
        to,
        isCitySelectorVisible,
        isDateSelectorVisible,
        cityData,
        isLoadingCityData,
        dispatch,
        departDate,
        highSpeed,
    } = props;
    
    const onBack = useCallback(()=>{
        window.history.back();
    },[])
 
    const cbs = useMemo(()=>{
         
        return  bindActionCreators({
            exchangeFromTo,
            showCitySelector
        },dispatch)
    },[])

    const citySelectorCbs = useMemo(()=>{
        return  bindActionCreators({
            onBack:hideCitySelector,
            fetchCityData,
            onSelect: setSelectedCity
        },dispatch);
    },[])

    const departDateCbs = useMemo(() => {
        return bindActionCreators(
            {
                onClick: showDateSelector,
            },
            dispatch
        );
    }, []);
    const dateSelector = useMemo(()=>{
        return  bindActionCreators({
            onBack:hideDateSelector,
        },dispatch)
    },[])
    const HighSpeedCbs = useMemo(()=>{
        return  bindActionCreators({
            toggle:toggleHighSpeed,
        },dispatch)
    },[])

    const onSelectDate = useCallback((day)=>{
        if(!day){
            return
        }
        if(day < h0()){
            return
        }
        dispatch(setDepartDate(day));
        dispatch(hideDateSelector())
    })
    return(
        <div>
            <div className="header-wrapper">
                <Header  title="火车票"  onBack={onBack} />
            </div>
            <form  action="./query.html"  className="form">
                <Journey  
                    from={from}  
                    to={to} 
                    {...cbs} />
                <DepartDate
                    time={departDate}
                    {...departDateCbs}
                />
                <HightSpeed 
                    highSpeed = {highSpeed}
                    {...HighSpeedCbs}
                />
                <Submit/>
            </form>
            <CitySelector
                show={isCitySelectorVisible}
                cityData = {cityData}
                isLoading = {isLoadingCityData}
                {...citySelectorCbs}
            />
            <DateSelector 
                show = {isDateSelectorVisible}
                {...dateSelector}
                onSelect = {onSelectDate}
            />
        </div>
    )
}

export default connect(
    function mapStateToProps(state){
        return state
    },
    function mapDispatchToProps(dispatch){
        return {dispatch}
    }
)(App) ;